<template>
  <div class="dmquery">
    <div class="dmquery-body">
      <table>
        <tr>
          <td width="120px">
            <a-input title="按关键字查询" placeholder="关键字" v-model="queryParams.keywords" allow-clear />
          </td>
          <td width="160px">
            <a-radio-group title="按状态查询" name="radioGroup"  button-style="solid"
                           v-model="queryParams.statusCode">
              <a-radio-button value="">全部</a-radio-button>
              <a-radio-button value="1">可用</a-radio-button>
              <a-radio-button value="0">已停用</a-radio-button>
            </a-radio-group>
          </td>
          <td width="230px">
            <a-range-picker v-model="createTimes"
                            title="按创建日期查询"
                            :placeholder="['创建起始日期','创建截止日期']"
                            :ranges="dateRanges"
                            :disabled-date="disabledFutureDates"
            />
          </td>
          <td>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import DataQueryUtils from '@/utils/DataQueryUtils.js'

export default {
  mixins: [DataQueryUtils],
  data() {
    return {
      queryParams: {
        keywords: '',
        statusCode: '',
        createTimes: null
      },
      createTimes: []
    }
  },
  watch: {
    createTimes(dates) {
      if (dates.length == 2) {
        const from = dates[0].format('YYYY-MM-DD')
        const to = dates[1].format('YYYY-MM-DD')
        this.queryParams.createTimes = [from, to]
      } else {
        this.queryParams.createTimes = null
      }
    }
  },
}
</script>
